<template>
	<view>
		<view class="ssk_zj">
			<uni-search-bar @input="input" :focus="true" bgColor="gainsboro" :radius="100" placeholder="搜索你想听的歌曲"></uni-search-bar>
		</view>
		
		<view v-if="ssjylb.length === 0">
			<view v-if="Lsjl.length">
				<view class="ssls">
					<view class="ssls_wz">
						搜索历史
					</view>
					<uni-icons size="22" type="trash"></uni-icons>
				</view>
				<view class="lsjl">
					<view v-for="(item, index) in Lsjl" :key="index" class="lsjl_xk">
						{{item}}
					</view>
				</view>
			</view>
			
			<view class="rmss" v-else>
				<view class="rmss_bt">
					热门搜索
				</view>
				<view v-for="(item, index) in list" :key="index" class="rmss_xx">
					<text class="pm">{{ index + 1 }}</text>
					<text class="gm">{{ item.first }}</text>
				</view>
			</view>
		</view>
		
		<view class="ssjylb" v-else>
			<view class="ssjylb_xk" v-for="(item, index) in 10" :key="index">
				<uni-icons size="20" type="search"></uni-icons>
				<view class="ssjylb_wz">
					起飞哈哈哈
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 延时器 timerId
				timerId: null,
				// 搜索的关键字
				gjz: '',
				// 热门搜索的数据
				list: [],
				// 搜索建议列表
				ssjylb: [],
				// 搜索历史记录
				Lsjl: []
			}
		},
		onLoad() {
			this.Rmss()
		},
		methods: {
			input(e) {
				// 清除timer 对应的延时器
				clearTimeout(this.timerId)
				// 重新启动一个延时器，并把 timerId 赋值给 this.timer
				this.timerId = setTimeout(() => {
					// 如果 500 毫秒内，没有触发新的输入事件，则为搜索关键词赋值
					this.gjz = e
					console.log(this.gjz)
					this.GoSsjylb()
				},500)
			},
			async Rmss() {
				const { data } = await uni.$http.get('/search/hot')
				this.list = data.result.hots
			},
			async GoSsjylb() {
				if(this.giz === '') {
					this.ssjylb = []
					return
				}
				const { data:res } = await uni.$http.get(`/search/suggest?keywords=${this.gjz}`)
				this.ssjylb = res
				console.log(this.ssjylb)
			}
		}
	}
</script>

<style lang="scss">
.ssk_zj {
	margin-top: 50rpx;
}

.ssls {
	margin: 10px 10px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.lsjl {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	
	.lsjl_xk {
		height: 20px;
		background-color: darkgray;
		line-height: 20px;
		margin: 5px;
		padding: 4px 10px;
		border-radius: 30px;
	}
}

.ssls_wz {
	font-size: 22px;
	font-weight: bold;
}

.rmss {
	margin: 10px 10px;
	
	.rmss_bt {
		font-size: 22px;
		font-weight: bold;
	}
	
	.rmss_xx {
		height: 50px;
		width: 100%;
	    line-height: 50px;
		margin-left: 5px;
		
		.pm {
			font-size: 18px;
			margin-right: 20px;
			color: grey;
		}
	}
}
.ssjylb_xk {
	display: flex;
	padding: 10px;
	.ssjylb_wz {
		margin-left: 5px;
	}
}
</style>
